<template>
  <div class="app">{{ content }}</div>
  <div>{{ sum }}</div>
  <div>{{ console(123) }}</div>
  <button @click="add">增加</button>
</template>

<!-- <script>
import { useStore, mapState, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState(["content", "name", "age"]),
    ...mapGetters(["sum", "console"]),
    // 在options式API中使用这种方法简化使用过程
  },
  methods: {
    add: () => {
      $store.commit("add");
    },
  },
};
</script> -->

<script setup>
import { toRefs, computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
const { content, name, age } = toRefs(store.state); //通过解构语法简化使用过程;

// const { sum, console } = toRefs(store.getters); // 因为getter不是一个ref对象所以会弹出警告
const sum = computed(() => store.getters.sum); // 使用这种方法即可使警告消失
const console = computed(() => store.getters.console);

const add = () => {
  store.commit("add");
};
</script>

<style lang="scss" scoped></style>
